<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/aui/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css" />
		<style type="text/css">
			html, body {
				background: rgba(0,0,0,0);
			}
			body {
			}
			.top-area {
			}
			.logo {
				height: 170px;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				display: box;
				box-orient: horizontal;
				box-pack: center;
				box-align: center;
			}
			.login-area {
				text-align: center;
			}
			.login-area img {
				width: 75px;
				height: 75px;
				border-radius: 8px;
				-webkit-border-radius: 8px;
			}
			.login-area p {
				padding: 5px 0 0 0;
				font-size: 18px;
				color: #fff;
			}
			.form {
				padding: 0 30px;
			}
			.form-row {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-flex-flow: row;
				flex-flow: row;
				width: 100%;
				padding: 15px;
				position: relative;
			}
			.form-row:after {
				content: "";
				position: absolute;
				bottom: 0px;
				left: 0px;
				right: 0px;
				border-bottom: 1px solid #3e8dce;
				-webkit-transform: scaleY(.5);
				-webkit-transform-origin: 0 0;
			}
			.form-row span {
				display: block;
				width: 50px;
				color: rgba(255,255,255,0.7);
			}
			.form-row span {
				font-size: 22px;
			}
			.form-row .input-box {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
				padding-top: 2px;
			}
			.form-row .input-box input {
				background: rgba(0,0,0,0);
				border: none;
				outline: none;
				color: rgba(255,255,255,0.9);
				padding: 4px;
				margin: 0;
			}
			.form-btn {
				padding: 30px 30px 15px 30px;
			}
			.aui-btn-4385f6 {
				background: #4385f6 !important;
				color: #f9f9f9 !important;
				border: none;
				outline: none;
			}
			.form-btn button:active {
				background: rgba(67,133,246,0.8) !important;
			}
			.form-o {
				padding: 0 30px;
			}
			.form-o span {
				float: left;
				color: #f9f9f9;
			}
			.form-o span:last-child {
				float: right;
			}
			.form-otherlogin {
				clear: both;
				padding: 0 30px;
				height: 150px;
			}
			.sdk-list {
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-orient: horizontal;
				-webkit-flex-flow: row;
				flex-flow: row;
			}
			.sdk-list  p {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
			}
			.sdk-list p span {
				display: block;
				width: 50px;
				height: 50px;
				background: #dce5ea;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				display: box;
				box-orient: horizontal;
				box-pack: center;
				box-align: center;
			}
			.sdk-list p span i {
				color: #114e6f;
				font-size: 30px;
			}
			.sdk-list p:nth-child(2) {
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				-webkit-box-pack: center;
				display: box;
				box-orient: horizontal;
				box-pack: center;
			}
			.float-left {
				float: left;
			}
			.float-right {
				float: right;
			}
			.sdk-txt {
				color: #a6b5c0;
				text-align: center;
				padding: 10px 0 30px 0;
			}
		</style>
	</head>
	<body>
		<div class="top-area">
			<div class="logo">
				<div class="login-area">
					<img src="../../image/pic.jpg" alt="" title="" />
					<p>
						点点例
					</p>
				</div>
			</div>
			<div class="form">
				<div class="form-area">
					<div class="form-row">
						<span class="iconfont icon-phone">&nbsp;&nbsp;|</span>
						<div class="input-box">
							<input type="text" name="phone" value="" placeholder="请输入手机号" />
						</div>
					</div>
					<div class="form-row">
						<span class="iconfont icon-password">&nbsp;&nbsp;|</span>
						<div class="input-box">
							<input type="password" name="phone" value="" placeholder="请输入密码" />
						</div>
					</div>
				</div>
			</div>
			<div class="form-btn">
				<button class="aui-btn aui-btn-4385f6 aui-btn-block" id="login-btn">
					登 录
				</button>
			</div>
			<div class="form-o">
				<span tapmode onclick="H.$openWin('reg_head','reg_head.html');">注册账号</span>
				<span onclick="H.$openWin('forgetPwd_head','forgetPwd_head.html');">忘记密码？</span>
			</div>
		</div>
		<div class="form-otherlogin">
			<p class="sdk-txt">
				其他方式登录
			</p>
			<div class="sdk-list">
				<p>
					<span class="float-left" onclick="H.$toast('敬请期待');"><i class="iconfont icon-qq"></i></span>
				</p>
				<p>
					<span><i class="iconfont icon-weixin" onclick="H.$toast('敬请期待');"></i></span>
				</p>
				<p>
					<span class="float-right" onclick="H.$toast('敬请期待');"><i class="iconfont icon-weibo"></i></span>
				</p>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/AHelper.js"></script>
	<script type="text/javascript" src="../../script/zepto.min.js"></script>
	<script type="text/javascript">
		Zepto(function($) {
			var bodyH = $("body").height();
			$(".top-area").css("height", (bodyH - 150) + "px");
			$("#login-btn").on("tap", function() {
				H.$setPrefs(function(ret, err) {
					H.$execScript('index', 'launch', 'closeFrame();');
					H.$closeCurrentToWin("index");
				}, 'user_info', {
					name : '点点多',
					id : 1
				});
			});
		});
	</script>
</html>